<template>
  <el-dialog
    v-model="visible"
    title="新建"
    draggable
    align-center
    destroy-on-close
    width="500"
    :before-close="handleBeforeClose"
  >
    <el-input clearable placeholder="请输入" v-model="name"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBeforeClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="addClassify">
const visible = defineModel('visible');
const currNodeData = defineModel('currNodeData');
const emit = defineEmits('handleConfirm');
const { isEdit } = defineProps({
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const name = ref('');
watch(
  () => isEdit,
  (newVal) => {
    name.value = newVal ? currNodeData.value.label : '';
  },
);
const handleBeforeClose = () => {
  visible.value = false;
};
const onConfirm = () => {
  currNodeData.value.label = name.value;
  emit('handleConfirm', currNodeData.value);
  handleBeforeClose();
};
</script>

<style scoped lang="less"></style>
